<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登录 | 程序猿张先森</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="keywords" content="博客,个人,学习,IT,生活,张海洋,程序猿,springboot,java,后端，登录">
    <meta name="description" content="张海洋，正宗97后，爱编程。喜欢旅行、摄影、爱生活。专注于Spring,SpringBoot等后端技术探索，以及MySql,Oracle数据库开发和SSM,SSH等后端流行框架学习。">

    <link rel="icon" type="image/x-icon" href="https://zhy-myblog.oss-cn-shenzhen.aliyuncs.com/static/img/favicon.ico">
    <link href="https://lib.baomitu.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <link href="https://lib.baomitu.com/font-awesome/5.8.0/css/fontawesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/login.css">

    <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://lib.baomitu.com/amazeui/2.7.2/js/amazeui.min.js"></script>
</head>
<body>
<div id="app">
    <!--引入共有头部-->
    <div th:replace="header :: header"></div>
    <!--页面主体-->
    <div id="main" style="margin-bottom:0">
        <div class="i_love_you">
            <div class="am-g">
                <h1>I Love You</h1>
                <p>去找一个像太阳一样的人<br/>帮你晒晒所有不值一提的迷茫</p>
            </div>
            <hr />
        </div>
        <div class="am-g"  style="height: 420px;">

            <div class="am-u-lg-6 am-u-sm-9 am-u-sm-centered">
                <h3>登录</h3>
                <hr>
                <div>
                    <form th:action="@{/login}" method="post" class="am-form" >
                        <div  class="loginInput am-input-group am-u-lg-10 col-md-offset-2 am-form-icon am-form-feedback" style="margin-left: 0">
                            <div class="am-input-group-label"><i class="fa fa-phone fa-lg"></i></div>
                            <input type="text" name="username" class="am-form-field" id="phone" placeholder="客官，这里输入手机号哦">
                            <span id="phone_null" class="icons am-icon-warning" style="color: orange"></span>
                            <span id="phone_error" class="icons am-icon-times" style="color: red"></span>
                        </div>
                        <br>
                        <div class="loginInput am-input-group am-u-lg-10 col-md-offset-2 am-form-icon am-form-feedback" style="margin-left: 0">
                            <div class="am-input-group-label"><i class="fa fa-lock fa-lg"></i></div>
                            <input type="password" name="password" id="password" placeholder="嘘，在这里悄悄输入密码">
                            <span id="password_null" class="icons am-icon-warning" style="color: orange"></span>
                        </div>
                        <br/>
                        <div class="am-u-lg-10 col-md-offset-2">
                            <label class="rememberMe" for="remember-me">
                                <input id="remember-me" type="checkbox">
                                记住十万年
                            </label>
                        </div>
                        <br>
                        <div class="am-input-group am-u-lg-10 col-md-offset-2" style="margin-left: 0">
                            <input type="submit" id="loginFormSubmit" value="登 录" class="am-btn am-btn-primary am-btn-sm am-fl" style="border-radius: 5px">
                            <!-- 按钮触发模态框 -->
                            <button type="button" class="am-btn am-btn-default am-btn-sm am-fr " data-am-modal="{target: '#my-alert'}" style="border-radius: 5px">
                                忘记密码 ^_^?
                            </button>
                        </div>
                        <div class="login_error" th:if="${param.error}">
                            <span class="am-alert am-alert-secondary" data-am-alert style="margin-left: 15%;background-color: #d85a37;color: white;border-radius: 5px">用户名不存在或密码错误!</span>
                        </div>
                    </form>

                    <!-- 模态框（Modal） -->
                    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
                        <div class="am-modal-dialog" style="border-radius: 5px;">
                            <div class="am-modal-hd" style="text-align: left;margin:auto auto 5px 20px">客官，在这里修改密码呦
                                <a href="javascript: void(0)" class="am-close am-close-alt am-close-spin" data-am-modal-close style="margin: 7px 10px auto auto">&times;</a>
                            </div>
                            <div class="am-modal-bd">
                                <form id="modal_form" class="am-form am-form-horizontal">
                                    <div class="am-form-group">
                                        <label for="modal_phone" class="am-u-sm-4 am-form-label">手机号</label>
                                        <div class="am-u-sm-8 am-form-icon am-form-feedback">
                                            <input class="modal_value" type="text" id="modal_phone" placeholder="输入要修改的手机号哦">
                                            <span id="modal_phone_null" class="modal_icons am-icon-warning" style="color: orange"></span>
                                            <span id="modal_phone_error" class="modal_icons am-icon-times" style="color: red"></span>
                                        </div>
                                    </div>
                                    <div class="am-form-group">
                                        <label for="auth_code" class="am-u-sm-4 am-form-label">验证码</label>
                                        <div class="am-u-sm-4 am-form-icon am-form-feedback">
                                            <input class="modal_value" type="text" id="auth_code" placeholder="点我右边那家伙获取验证码">
                                            <span id="auth_code_null" class="modal_icons am-icon-warning" style="color: orange"></span>
                                            <span id="auth_code_error" class="modal_icons am-icon-times" style="color: red"></span>
                                        </div>
                                        <div class="am-u-sm-4" style="padding-left:0">
                                            <button type="button" id="msg_btn" class="am-btn am-btn-secondary am-round">获取验证码</button>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="new_password" class="am-u-sm-4 am-form-label">新密码</label>
                                        <div class="am-u-sm-8 am-form-icon am-form-feedback">
                                            <input class="modal_value" value="" type="password" id="new_password" placeholder="快来设置一个新密码吧">
                                            <span id="new_password_null" class="modal_icons am-icon-warning" style="color: orange"></span>
                                        </div>
                                    </div>

                                    <div class="am-form-group">
                                        <label for="check_password" class="am-u-sm-4 am-form-label">确认密码</label>
                                        <div class="am-u-sm-8 am-form-icon am-form-feedback">
                                            <input class="modal_value" type="password" id="check_password" placeholder="再次确认一下新密码哦">
                                            <span id="modal_check_password_error" class="icons am-icon-times" style="color: red"></span>
                                            <span id="check_password_null" class="modal_icons am-icon-warning" style="color: orange"></span>
                                        </div>
                                    </div>
                                    <div class="phoneNotExit">
                                        <span class="modal_icons phoneNotExitSpan">手机号不存在,修改密码失败！</span>
                                    </div>
                                </form>
                            </div>
                            <div class="am-modal-footer" style="text-align: right">
                                <button type="button" id="change_password_cancel_btn" class="am-btn am-btn-default am-round" data-am-modal-close>取消</button>
                                <button type="button" id="change_password_btn" class="am-btn am-btn-warning am-round">确认修改</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--引入共有底部-->
    <div th:replace="footer :: footer"></div>
    <!--消息盒子+反馈-->
    <div th:replace="other :: other"></div>
</div>

<script src="js/login.js"></script>
<script src="js/all.js"></script>
</body>
</html>